<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        #list_box{
            width:960px;height:450px;background:blue;
            margin:100px auto 0;
        }
        #list_box ul li p{
            font-size:30px;text-align:center;line-height:200px;
        }
        #list_box ul li{width:300px;height:200px;
            float:left;margin:10px 10px;
            list-style:none;position:relative;}
        #list_box ul li:nth-child(1){background:#D44825;}
        #list_box ul li:nth-child(2){background:#2D8AF1;}
        #list_box ul li:nth-child(3){background:#0CC5E7;}
        #list_box ul li:nth-child(4){background:#996699;}
        #list_box ul li:nth-child(5){background:#dddddd;}
        #list_box ul li:nth-child(6){background:#64D500;}
        #list_box ul li img{position:absolute;
            top:0;left:0;display:none;}

        /* 没兼容，限Chrome */

        #list_box ul li.rot{-webkit-animation:rot 0.5s;}
        @-webkit-keyframes rot{
            0%,20%,50%,80%,100%{-webkit-transform-origin:top center;}
            0%{-webkit-transform:rotate(0deg);}
            20%{-webkit-transform:rotate(-20deg);}
            50%{-webkit-transform:rotate(20deg);}
            80%{-webkit-transform:rotate(-20deg);}
            100%{-webkit-transform:rotate(0deg);}
        }
        #list_box ul li.top_s{-webkit-animation:top_s 0.8s 2;}
        @-webkit-keyframes top_s{
            from{-webkit-transform:translatex(0px);}
            to{-webkit-transform:translatex(10px);}
        }
        #list_box ul li.top{-webkit-animation:toop 0.8s 2;}
        @-webkit-keyframes toop{
            from{-webkit-transform:translateY(0px);}
            to{-webkit-transform:translateY(20px);}
        }

        #list_box ul li.sca{-webkit-animation:sca 0.8s 2;}
        @-webkit-keyframes sca{
            0%{-webkit-transform:scale(1);}
            20%{-webkit-transform:scale(1.2);}
            40%{-webkit-transform:scale(0.8);}
            60%{-webkit-transform:scale(1.2);}
            80%{-webkit-transform:scale(0.9);}
            100%{-webkit-transform:scale(1);}
        }


    </style>


</head>
<body>

<div id="list_box">
    <ul>
        <li><p>ABX</p><img src="img/1.img/1.png" /></li>
        <li><p>vcb</p><img src="img/1.img/2.png" /></li>
        <li><p>fgd</p><img src="img/1.img/3.png" /></li>
        <li><p>ZXC</p><img src="img/1.img/4.png" /></li>
        <li><p>QWE</p><img src="img/1.img/5.png" /></li>
        <li><p>FGF</p><img src="img/1.img/6.png" /></li>
    </ul>
</div>
</body>
<script src="jquery-2.1.4.min.js"></script>
<script>
    $("#list_box ul li").hover(function(){
        var _index=$(this).index();
        var mian=["sca","rot","top_s","top"];
        var num=Math.floor(Math.random()*10)%4;  //随机选取大于等于 0.0 且小于 1.0 的伪随机 //Math.random()取整
        //alert(num);
        var C=mian[num];
        $(this).addClass(C);
        $("#list_box ul li img").eq(_index).fadeIn(1000);
    },function(){
        $(this).removeClass();
        $("#list_box ul li img").fadeOut(500);
    })
</script>
</html>
